import { Divider } from 'antd'
import { fabric } from 'fabric'
import { useEffect } from 'react'

export default function View() {
  // 普通文本 Text
  const text = new fabric.Text('雷猴，我是德育处主任', {
    fill: 'hot#aa96da', // 文本填充色
    fontSize: 20 // 字号
  })

  // 可编辑文本 IText
  const itext = new fabric.IText('双击可编辑', {
    top: 60, // 文本到画布顶部的距离
    left: 100 // 文本到画布左侧的距离
  })

  // 文本框 Textbox
  const textbox = new fabric.Textbox('雷猴 世界', {
    width: 100,
    top: 180,
    left: 100
  })

  useEffect(() => {
    const canvas = new fabric.Canvas('c', {
      width: 1000,
      height: 1000
    })
    canvas.add(text)
    canvas.add(itext)
    canvas.add(textbox)
  }, [])

  return (
    <div className='view-wrapper'>
      <Divider plain>文本元素</Divider>
      <canvas id='c' style={{ border: '1px solid #ccc' }}></canvas>
    </div>
  )
}
